<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <script src="./js/jquery-1.11.1.js"></script>
    <style>
        header {
            position: relative;
            top: -952px;
            left: 0;

        }

        .tu {
            position: relative;
            height: 952px;
        }

        .lun {
            width: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .lun img {
            width: 100%;
        }

        .tan {
            width: 500px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        li:hover a {
            color: black;
            font-weight: 700;
        }

        .q {
            /* height: 80px; */
            line-height: 80px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .q1 {
            font-size: 30px;
        }

        .k {
            width: 100px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            position: absolute;
            bottom: 10px;
            left: 47%;
        }

        .k li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #fff;
        }

        .ge {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin: 20px 0;
        }

        .ge1 {
            font-size: 30px;
        }

        .w1 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            width: 100%;
            height: 600px;
            margin-bottom: 50px;
        }

        .w11 {
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            width: 100%;
            height: 600px;
            margin-bottom: 100px;
        }

        .w2 {
            width: 60%;

        }

        .w3 {
            width: 30%;

        }

        .w2 img {
            width: 100%;
        }

        .w3 img {
            width: 100%;
        }

        .e {
            color: green;
        }

        .e1 {
            font-weight: 700;
        }

        .e2 {
            margin-top: 20px;
        }

        .e3 {
            margin: 10px 0;
        }

        .e4 {
            background: #000;
            width: 100px;
            height: 50px;
            color: #fff;
            display: block;
            line-height: 50px;
            text-align: center;
        }

        .e5 {
            width: 200px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .e6 {
            margin-top: 15px;
        }

        .gg {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            /* height: 300px; */
            /* background: red; */
        }

        .gg img {
            width: 100%;
            height: 240px;
        }

        .gg div {
            width: 30%;
        }

        .tt {
            transition: transform .5s linear;
        }

        .tt:hover {
            transform: scale(0.95);
        }

        .tt1 {

            transition: transform 0.5s linear;
        }

        .tt1:hover {
            transform: scale(0.95);
        }

        .mm {
            width: 360px !important;
            height: 240px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;
            background: url(./img/Reno6-universe-v3-pc.jpg) no-repeat 0 0/100% 100%;
            transition: opacity .5s linear;
        }

        .mm:hover {
            opacity: 0;
        }

        .mm1 {
            position: relative;
        }

        .mm2 {
            width: 100%;
            /* height: 240px; */
        }
    </style>
</head>

<body>
    <div class="tu">
        <a href="#" class="lun"><img src="./img/1.jpg" alt="" class="ll"></a>
        <a href="#" class="lun"><img src="./img/2.jpg" alt="" class="ll"></a>
        <a href="#" class="lun"><img src="./img/3.jpg" alt="" class="ll"></a>
        <ul class="k">
            <li class="k1">
            </li>
            <li class="k2">
            </li>
            <li class="k3">
            </li>
        </ul>
    </div>
    <header>
        <div class="w">
            <div class="q">
                <h1 class="q1">
                    oppo
                </h1>

                <ul class="tan">
                    <li>
                        <a href="#">手机</a>
                    </li>
                    <li>

                        <a href="#">智能软件</a>
                    </li>
                    <li>

                        <a href="#">欢太商城</a>
                    </li>
                    <li>

                        <a href="#">关于 OPPO</a>
                    </li>
                    <li>

                        <a href="#">ColorOS</a>
                    </li>
                    <li>

                        <a href="#">服务</a>
                    </li>
                    <li>

                        <a href="#">企业业务</a>
                    </li>
                </ul>
                <p>

                </p>
            </div>
        </div>
    </header>
    <nav class="w">
        <div class="ge">
            <h1 class="ge1">更多新品</h1><a href="#">查看所有手机</a>
        </div>
        <div class="w1">
            <div class="w2">
                <img class="tt" src="./img/Reno6 pro plus-middlebanner-blue-1600x1068-v2-pc.jpg" alt="">
                <p class="e2"> <span class="e1">Reno6 Pro+</span> &emsp13; <span class="e">新品</span></p>
                <p class="e3">索尼 IMX766 传感器，骁龙 870 芯片</p>
                <p class="e1">3999 元起</p>
                <p class="e5">
                    <span class="e4">了解更多</span><a href="#" class="e6">立即购买</a>
                </p>
            </div>
            <div class="w3">
                <img class="tt1" src="./img/Reno6-middlebanner-black-1340x1786-v3-pc.jpg" alt="">
                <p class="e2"> <span class="e1">Reno6</span> &emsp13; <span class="e">新品</span></p>
                <p class="e3">焕采光斑人像视频，65W 超级闪充</p>
                <p class="e1">2799 元起</p>
                <p class="e5">
                    <span class="e4">了解更多</span><a href="#" class="e6">立即购买</a>
                </p>
            </div>
        </div>
        <div class="w11">
            <div class="w3">
                <img class="tt" src="./img/K9-middlebanner-black-1340x1786-v3-pc.jpg" alt="">
                <p class="e2"> <span class="e1">Reno6</span> &emsp13; <span class="e">新品</span></p>
                <p class="e3">焕采光斑人像视频，65W 超级闪充</p>
                <p class="e1">2799 元起</p>
                <p class="e5">
                    <span class="e4">了解更多</span><a href="#" class="e6">立即购买</a>
                </p>
            </div>
            <div class="w2">
                <img class="tt" src="./img/Find X3-middlebanner-moka-1600x1068-v2-pc.jpg" alt="">
                <p class="e2"> <span class="e1">Reno6 Pro+</span> &emsp13; <span class="e">新品</span></p>
                <p class="e3">索尼 IMX766 传感器，骁龙 870 芯片</p>
                <p class="e1">3999 元起</p>
                <p class="e5">
                    <span class="e4">了解更多</span><a href="#" class="e6">立即购买</a>
                </p>
            </div>

        </div>

    </nav>
    <nav class="w">
        <div class="ge">
            <h1 class="ge1">智能硬件</h1><a href="#">查看全部智能硬件</a>
        </div>
        <div class="w1">
            <div class="w2">
                <img class="tt" src="./img/TV K9-middlebanner-black-1600x1068-v2-pc.jpg" alt="">
                <p class="e2"> <span class="e1">OPPO 智能电视 K9</span> &emsp13; <span class="e">新品</span></p>
                <p class="e3">十亿色彩，十分出彩</p>
                <p class="e5">
                    <span class="e4">了解更多</span><a href="#" class="e6">立即购买</a>
                </p>
            </div>
            <div class="w3">
                <img class="tt" src="./img/Enco free2-middlebanner-white-1340x1786-v3-pc.jpg" alt="">
                <p class="e2"> <span class="e1">OPPO Enco Free2</span> &emsp13; <span class="e">新品</span></p>
                <p class="e3">个性化降噪，每一刻都美妙</p>
                <p class="e5">
                    <span class="e4">了解更多</span><a href="#" class="e6">立即购买</a>
                </p>
            </div>
        </div>

    </nav>
    <div class="w">
        <div class="ge">
            <h1 class="ge1">探索 OPPO</h1><a href="#">
                <>
            </a>

        </div>
        <div class="gg">
            <div class="mm1">
                <!-- <img class="mm" src="./img/Reno6-universe-v3-pc.jpg" alt=""> -->
                <div class="mm">

                </div>
                <video class="mm2" muted autoplay  loop src="./shi/kv-video-cover-1-v2.mp4"></video>
                <p class="e2"> <span class="e1">探索 Reno 系列</span> </p>
                <p class="e3">在我眼里你会发光</p>
                <a href="#">了解更多</a>
            </div>
            <div>
                <img src="./img/discovery-01.jpg" alt="">
                <p class="e2"> <span class="e1">探索 Reno 系列</span> </p>
                <p class="e3">查找附近 OPPO 体验店，了解更多会员权益</p>
                <a href="#">了解更多</a>
            </div>
            <div>
                <img src="./img/discovery-02.jpg" alt="">
                <p class="e2"> <span class="e1">O学堂</span> </p>
                <p class="e3">立即报名摄影课程，一起发现生活中的美</p>
                <a href="#">了解更多</a>
            </div>
        </div>
    </div>
    <script>
        var but = document.querySelector(".k1");
        var but2 = document.querySelector(".k2");
        var but3 = document.querySelector(".k3");
        // var hua = document.querySelector(".tt");
        // var hua1 = document.querySelector(".tt1");
        // var hua2 = document.querySelector(".tt2");
        // var hua3 = document.querySelector(".tt3");
        // var hua4 = document.querySelector(".tt4");
        // var hua5 = document.querySelector(".tt5");
        // hua.onmouseover = function () {
        //     hua.style.width = "90%"
        // }
        // hua.onmouseout = function () {
        //     hua.style.width = "100%"
        // }
        // hua1.onmouseover = function () {
        //     hua1.style.width = "90%"
        // }
        // hua1.onmouseout = function () {
        //     hua1.style.width = "100%"
        // }
        // hua2.onmouseover = function () {
        //     hua2.style.width = "90%"
        // }
        // hua2.onmouseout = function () {
        //     hua2.style.width = "100%"
        // }
        // hua3.onmouseover = function () {
        //     hua3.style.width = "90%"
        // }
        // hua3.onmouseout = function () {
        //     hua3.style.width = "100%"
        // }
        // hua4.onmouseover = function () {
        //     hua4.style.width = "90%"
        // }
        // hua4.onmouseout = function () {
        //     hua4.style.width = "100%"
        // }
        // hua5.onmouseover = function () {
        //     hua5.style.width = "90%"
        // }
        // hua5.onmouseout = function () {
        //     hua5.style.width = "100%"
        // }
        $(document).ready(function () {
            var a = 0
            $('.lun').eq(a).show().siblings('.lun').hide()
            but.style.background = "red"
            setInterval(() => {
                a++
                $('.lun').eq(a).show().siblings('.lun').hide()
                if (a == 1) {
                    but2.style.background = "red"
                    but.style.background = ""
                    but3.style.background = ""
                }
                if (a == 2) {
                    but3.style.background = "red"
                    but2.style.background = ""
                    but.style.background = ""
                }
                if (a == 3) {
                    a = 0
                    $('.lun').eq(a).show().siblings('.lun').hide()
                }
                if (a == 0) {
                    but.style.background = "red"
                    but2.style.background = ""
                    but3.style.background = ""
                }
            }, 2000)
        })
        // var a = [1, 2, 3, 4, 5]
        // a.reduce((b, item) => {
        //     b -= item
        //     return b
        // },100)
        // var a = [1, 2, 3]
        // var b = a.join("|")
        // console.log(b);
        // let objs = [{ count: 20 }, { count: 66 }, { count: 16 }, { count: 30 }, { count: 5 }, { count: 20 }, { count: 66 }];
        // objs.sort((a, b) => {
        //     return a.count - b.count
        // })
        // var obj = []
        // var index = objs.findIndex(item => {
        //     return item.count == ll.count
        // })
        // console.log(index);
        // objs.forEach(item => {
        //     if (index == -1) {
        //         return obj.push(item.count)
        //     }
        // })
        // console.log(obj);
        // var a = obj.join("|")
        // console.log(a);


        // var a=[1,9,8,1,3]
        // a.sort(function(a,b){
        //     return a-b
        // })
        // console.log(a);
    </script>
</body>

</html>